<div ui-view="" class="fade-in ng-scope"><div class="bg-light lter b-b wrapper-md ng-scope">
  <h1 class="m-n font-thin h3" translate="复选框&单选框"></h1>
</div>
<div class="wrapper-md ng-scope">
	<div class="row">
		<!--复选框样式颜色-->
		<div class="col-sm-6">
            <div class="panel panel-default">
            	<!--面板标题-->
                <div class="panel-heading font-bold" translate="复选框"></div>
                <div class="panel-body">
                    <p>通过设置label标签的class来快速改变按钮的样式</p>
                    <div class="col-sm-6">
                        <p class="font-bold"><code>.checkbox-inline</code>样式</p>
                        <p>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="option1"> a
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="option2"> b
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" value="option3"> c
                            </label>
                        </p>
                    </div>
                    <div class="col-sm-6">
                        <div class="font-bold"><code>.i-checks</code>样式</div>
                        <p></p>
                        <p>
                            <label class="i-checks">
                                <input type="checkbox" value=""><i></i>a
                            </label>
                            <label class="i-checks">
                                <input type="checkbox" value=""><i></i>b
                            </label>
                            <label class="i-checks">
                                <input type="checkbox" value=""><i></i>c
                            </label>
                        </p>
                    </div>
                 </div>
            </div>
        </div>

        <!--复选框大小-->
        <div class="col-sm-6">
            <div class="panel panel-default">
            	<!--面板标题-->
                <div class="panel-heading font-bold" translate="复选框大小"></div>
                <div class="panel-body">
                    <p>通过设置label标签的class来快速改变<code>.i-checks</code>样式复选框的大小</p>
                    <p>
                    <div class="checkbox">
                        <label class="i-checks i-checks-sm">
                            <input type="checkbox"><i></i>Small size checkbox 样式：<code>i-checks-sm</code>
                        </label>
                    <p></p>
                    <label class="i-checks i-checks-lg">
                        <input type="checkbox"><i></i> Large size checkbox 样式：<code>i-checks-lg</code>
                    </label>
                    </div>
                    </p>
                </div>
            </div>
        </div>        
	</div>
	<div class="row">
		<!--复选框绑定值-->
		<div class="col-sm-6">
            <div class="panel panel-default">
            	<!--面板标题-->
                <div class="panel-heading font-bold" translate="复选框绑定值"></div>
                <div class="panel-body">
                    <p>
                        通过<code>ng-model</code>来绑定复选框的值,选中为true,不选为false
                    </p>
                    <p></p>
                    <p>
                        <label class="checkbox-inline">
                            <input type="checkbox"  ng-model="vm.checkValue"> a
                        </label>
                        <label class="i-checks">
                            <input type="checkbox" ng-model="vm.checkValue"><i></i>a
                        </label>
                    </p>
                    <textarea>{{vm.checkValue}}</textarea>
                </div>
            </div>
        </div>
        <!--对一组进项操作-->
        <div class="col-sm-6">
            <div class="panel panel-default">
            	<!--面板标题-->
                <div class="panel-heading font-bold" translate="复选框组操作"></div>
                <div class="panel-body">
                    <p>
                        <label class="checkbox-inline">
                            <input type="checkbox"  ng-model="vm.isSelectAll" ng-click="vm.selectAll()">
                            <i></i> 全选/全不选
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox"  ng-click="vm.invertSelection()">
                            <i></i> 反选
                        </label>
                    </p>

                    <div class="font-bold">按钮状态</div>
                    <p>
                        <div class="col-sm-3 " ng-repeat="checkBox in vm.checkItemList">
                            <label class="checkbox-inline">
                                <input type="checkbox"  ng-model="checkBox.isChecked">
                                <i></i> {{ checkBox.name }}
                            </label>
                        </div>
                    </p>
                </div>
            </div>
        </div>		
	</div>
    <div class="row">
        <!--单选框样式颜色-->
        <div class="col-sm-6">
            <div class="panel panel-default">
                <!--面板标题-->
                <div class="panel-heading font-bold" translate="单选框"></div>
                <div class="panel-body">
                    <p>通过设置label标签的class来快速改变按钮的样式</p>
                    <div class="col-sm-6">
                        <p class="font-bold">无样式</p>
                        <p>
                        <div class="radio">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                                Option one
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                Option two
                            </label>
                        </div>
                        </p>
                    </div>
                    <div class="col-sm-6">
                        <div class="font-bold"><code>.i-checks</code>样式</div>
                        <p></p>
                        <p>
                        <div class="radio">
                            <label class="i-checks">
                                <input type="radio" name="a" value="option1">
                                <i></i>
                                Option one
                            </label>
                        </div>
                        <div class="radio">
                            <label class="i-checks">
                                <input type="radio" name="a" value="option2" checked>
                                <i></i>
                                Option two checked
                            </label>
                        </div>
                        <div class="radio">
                            <label class="i-checks">
                                <input type="radio" value="option2" checked disabled>
                                <i></i>
                                Option three checked and disabled
                            </label>
                        </div>
                        <div class="radio">
                            <label class="i-checks">
                                <input type="radio" name="a" disabled>
                                <i></i>
                                Option four disabled
                            </label>
                        </div>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!--单选框大小-->
        <div class="col-sm-6">
            <div class="panel panel-default">
                <!--面板标题-->
                <div class="panel-heading font-bold" translate="单选框大小"></div>
                <div class="panel-body">
                    <p>通过设置label标签的class来快速改变<code>.i-checks</code>样式单选框的大小</p>
                    <p>
                        <div class="checkbox">
                            <label class="i-checks i-checks-sm">
                                <input type="radio"><i></i>Small size radio 样式：<code>i-checks-sm</code>
                            </label>
                        <p></p>
                        <label class="i-checks i-checks-lg">
                            <input type="radio"><i></i> Large size radio 样式：<code>i-checks-lg</code>
                        </label>
                         </div>
                </p>
            </div>
        </div>
    </div>
    <div class="row">
        <!--单选框绑定值-->
        <div class="col-sm-6">
            <div class="panel panel-default">
                <!--面板标题-->
                <div class="panel-heading font-bold" translate="单选框绑定值"></div>
                <div class="panel-body">
                    <p>
                        通过<code>ng-model</code>和<code>value</code>来绑定单选框的值,选中对象的value值赋给ng-model
                    </p>
                    <p></p>
                    <p>
                        <label>
                            <input type="radio" name="optionsRadios"  value="option1" ng-model="vm.radioValue" checked>
                            Option one
                        </label>
                        <label>
                            <input type="radio" name="optionsRadios" value="option2" ng-model="vm.radioValue" >
                            Option two
                        </label>
                        <label>
                            <input type="radio" name="optionsRadios"  value="option3" ng-model="vm.radioValue" >
                            Option three
                        </label>
                    </p>
                    <textarea>{{vm.radioValue}}</textarea>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
